import { Button, Dropdown, Icon, Menu } from "antd"
import styles from './index.less'

const MoreOption = props => {
  const btnInfo = props.btnInfo ? props.btnInfo : {}
  const iconInfo = props.iconInfo ? props.iconInfo : {}

  const handleMenuClick = (e) => {
    if(props.moreMenuClick){
      props.moreMenuClick(e)
    }
  }

  const menu = (
    <Menu onClick={handleMenuClick}>
      {
        props.menuList.map(item => {
          return (
            <Menu.Item key={item.key}>{item.name}</Menu.Item>
          )
        })
      }
    </Menu>
  );



  return(
    <Dropdown overlay={menu}>
      <Button type="primary" style={{...btnInfo.style}} className={styles.moreOptBtn}>
        {btnInfo.name}
        <Icon type="down" style={{...iconInfo.style}} />
      </Button>
    </Dropdown>
  )
}

export default MoreOption